<script setup lang="ts">
import { onBeforeMount, ref, reactive } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { Detail_Meeting } from '@/stores/MeetingManage/Meeting details'
import { getMeetingInfo, getEnrollInfo, delMeetingList } from '@/api/Meeting';
import { useRoute } from 'vue-router';
import { getHMS } from '@/utils/time';
import Previous from '@/components/Previous/Previous.vue'
import router from "@/router";

const Meeting_details = Detail_Meeting()

// 路由
const route = useRoute();

// 返回按钮
const back = () => {
	router.push("/Meeting");
}

// 报名信息
let meetingInfo: any = ref([])
let enrollInfo = ref([])
onBeforeMount(() => {
	// 会议详情
	getMeetingInfo(route.query.id)
		.then(response => {
			meetingInfo.value = response.data.data
		})
	// 报名人员信息
	getEnrollInfo(route.query.id)
		.then(response => {
			enrollInfo.value = response.data.data
		})
})

//删除会议
const del = () => {
	ElMessageBox.confirm(
		'是否确定删除会议',
		'确认提示',
		{
			confirmButtonText: 'OK',
			cancelButtonText: 'NO',
			type: 'warning',
		}
	)
		.then(() => {
			delMeetingList(route.query.id)
				.then(response => {
					console.log(response);
					router.push({ path: "/Meeting" })
				})
			ElMessage({
				type: 'success',
				message: '删除成功',
			})
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消',
			})
		})
}



</script>

<template>
	<Previous @click="back"></Previous>
	<div style="width: 80vw; height: 100vh;">
		<div class="common-layout">
			<el-container>
				<el-header style="height: auto;">
					<nav>
						<div id="application">
							<p class="title">会议名称：{{ meetingInfo.meetingName }}</p>
							<el-button plain @click="del"> 删除会议 </el-button>
						</div>
						<ul>
							<li>
								<p>会议时间： {{ getHMS(meetingInfo.meetingStartTime) }} ~ {{ getHMS(meetingInfo.meetingEndTime)
								}} </p>
								<p>培训区域：{{ meetingInfo.trainingArea }}</p>
							</li>
							<li>
								<p>会议模式：{{ meetingInfo.meetingMode }}</p>
								<p>报名截止时间：{{ getHMS(meetingInfo.meetingDeadline) }}</p>
							</li>
							<li>
								<p>最多报名人数：{{ meetingInfo.maximumPeopleNumber }}</p>
								<p>会议地点：{{ meetingInfo.meetingPlace }}</p>
							</li>
							<li></li>
						</ul>
					</nav>
				</el-header>
				<el-main>
					<section class="body">
						<div class="stay structure">
							<span>住宿情况：</span>
							{{ meetingInfo.meetingAgenda }}
						</div>
						<div class="process structure">
							<span>会议议程</span>
							<!-- {{ meetingInfoArr[0] }} -->
							<el-table :data="meetingInfo.meetingAgendaSpeakerList" border style="width: 100%">
								<el-table-column prop="meetingAgenda" label="会议议程" />
								<el-table-column prop="speaker" label="主讲人" width="250" />
							</el-table>
						</div>
						<div class="annex structure">
							<span>会议资料附件</span>

						</div>
						<div class="imgBox structure">
							<p>图片展示</p>
							<img v-if="meetingInfo.meetingResourceList" :src="meetingInfo.meetingResourceList[0].resourceUrl" alt="">
						</div>
						<div class="result structure">
							<span>已报名人员</span>
							<el-table :data="enrollInfo" border style="width: 100%">
								<el-table-column prop="studentName" label="参会人员姓名" />
								<el-table-column prop="registrationTime" label="报名时间" />
								<el-table-column prop="phone" label="联系方式" />
							</el-table>
						</div>
					</section>
				</el-main>
			</el-container>
		</div>
	</div>
</template>



<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav {
	/* background-color: oldlace; */
	padding: 0 100px;
}

.title {
	font-size: 17px;
	font-weight: bold;
}

#application {
	display: flex;
	justify-content: space-between;
}

p {
	margin: 5px 5px;
}

li>p {
	font-size: 10px;
}

ul {
	display: flex;
	justify-content: space-between
}

.body {
	padding: 30px 100px;
	/* height: 200px; */
	background-color: rgba(240, 242, 245, 1);
	margin-top: 30px;
}

/* 公共结构 */
.structure {
	background-color: white;
	padding: 10px;
	margin-bottom: 30px;
}

/* 住宿情况 */
.stay {
	height: auto;

}

/* 议程 */
.process {
	height: auto;
}

/* 附件 */
.annex {
	height: auto;
}

/* 图片展示 */
.imgBox img {
	width: auto
}
</style>